<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>model</title>
  <script src="/js/vue.min.js"></script>
  <style>
    .div {
      height: 400px;
      background-color: aqua;
    }

    .demo-alert-box {
      padding: 10px 20px;
      background: #f3beb8;
      border: 1px solid #f09898;
    }
  </style>
</head>

<body>
  <div id="model">
    <div id="input">
      <input v-model="message" placeholder="edit me">
      <p>Message is: {{ message }}</p>
    </div>

    <div id="textarea">
      <span>Multiline message is:</span>
      <p style="white-space: pre-line;">{{ textarea }}</p>
      <br>
      <textarea v-model="textarea" placeholder="add multiple lines"></textarea>
    </div>

    <div id='example-3'>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      <p><span>Checked names: {{ checkedNames }}</span></p>
    </div>

    <div id="example-4">
      <p>
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
      </p>
      <p><span>Picked: {{ picked }}</span></p>
    </div>

    <div id="example-5">
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <template v-for="(item, index) in selectedData" :key="index">
          <option :value="item">{{ item }}</option>
        </template>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>

    <div id="example-6">
      <select v-model="multipleSelected" multiple style="width: 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <br>
      <span>multipleSelected: {{ multipleSelected }}</span>
    </div>

    <div id="example-7">
      <input type="radio" v-model="selectGender" :value="gender.female">
      <label for="female">{{ gender.female }}</label>
      <input type="radio" v-model="selectGender" :value="gender.male">
      <label for="male">{{ gender.male }}</label>
      <p>性别: {{ selectGender }}</p>
    </div>

    <div id="#example-8">
      <p>岁数: {{ age }}
        <input v-model.trim.number="age" type="number"></p>
    </div>
    <br>
    <div id="#example-9">
      <custom-input v-model="searchText"></custom-input>
      <!-- <custom-input :value="searchText" @input="searchText = $event"></custom-input> -->
      <p>组件里输入的内容: {{ searchText }}</p>
    </div>
    <br>
    <div id="#example-10">
      <p>下方是个slot插槽</p>
      <alert-box>
        Something bad happened.
      </alert-box>
      <!-- 上方组件标签里的html内容会传递给组件里的<slot></slot>元素,直接渲染-->
    </div>
  </div>
</body>

<script>

  Vue.component('custom-input', {
    props: ['hello'], //props里的标识符是什么不重要, 此处重要的是 input中v-bind:value属性值为必须
    template: `<input v-bind:value="hello" v-on:input="$emit('input', $event.target.value)">`,
    // template: `<input v-model="value">`,
    // model: {
    //   prop: 'value', // 绑定的值，通过父组件传递
    //   event: 'input' // 自定义事件名
    // },
  })

  Vue.component('alert-box', {
    template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>`
  })

  let app = new Vue({
    el: '#model',
    data: {
      message: "",
      textarea: "",
      picked: "",
      selected: '',
      selectedData: ['a', 'b', 'c'],
      multipleSelected: '',
      checkedNames: [],
      selectGender: "",
      gender: {
        female: "男",
        male: "女",
      },
      age: 0,
      searchText: ''
    },
    methods: {

    }
  })
</script>

</html>
